<template>
  <el-drawer
    :visible.sync="visible"
    size="55%"
    :append-to-body="true"
    custom-class="ModelFormItemConfig"
    @closed="handleClosed">
    <template #title>
      <div>
        <span style="color: dodgerblue; font-weight: 700;">{{`${formItemInfo.name}[${formItemInfo.code}]：`}}</span>表单项配置
      </div>
    </template>
    <template>
      <div style="padding-left: 20px;">
        <div>
          <span>选择表单项类型：</span>
          <el-select v-model="value" @change="selectChanged">
            <el-option
              v-for="(v, k) in formItemType"
              :key="k" :label="v" :value="k">
            </el-option>
          </el-select>
        </div>
      </div>
    </template>
  </el-drawer>
</template>

<script>
import formItem from '@/js/common/FormItemTypeUtils'

export default {
  name: 'ModelFormItemConfig',
  components: {
  },
  props: {
    formItemInfo: {
      type: Object
    }
  },
  mixins: [],
  data(){
    return {
      loading: false,
      visible: true,
      value: 'Input',
      formItemType: formItem
    }
  },
  methods: {
    handleClosed(){
      this.$emit('closed')
    },
    selectChanged(v){
      console.log(v)
    }
  },
  mounted(){

  }
}
</script>

<style lang="less">

</style>
